<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useMessage } from 'naive-ui';

defineOptions({ name: 'VoiceDiagnosis' });

const isListening = ref(false);
const isProcessing = ref(false);
const conversation = ref<Array<{ type: 'user' | 'ai'; content: string; time: string }>>([
  {
    type: 'ai',
    content: '您好！我是AI语音诊断助手，请问有什么可以帮助您的？',
    time: '10:00'
  }
]);
const userInput = ref('');
const message = useMessage();

// 格式化时间
function formatTime() {
  const now = new Date();
  return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
}

// 开始录音
function startListening() {
  if (isProcessing.value) {
    message.warning('正在处理上一条语音，请稍候');
    return;
  }

  isListening.value = true;
  message.info('开始录音...');

  // 模拟录音过程
  setTimeout(() => {
    stopListening();
  }, 3000);
}

// 停止录音
function stopListening() {
  isListening.value = false;
  isProcessing.value = true;
  message.info('正在识别语音...');

  // 模拟语音识别和处理
  setTimeout(() => {
    const recognizedText = '我的GPU使用率很高，是什么原因？';
    addUserMessage(recognizedText);
    processUserQuery(recognizedText);
    isProcessing.value = false;
  }, 2000);
}

// 添加用户消息
function addUserMessage(text: string) {
  conversation.value.push({
    type: 'user',
    content: text,
    time: formatTime()
  });
  userInput.value = '';
  scrollToBottom();
}

// 处理用户查询并生成AI响应
function processUserQuery(query: string) {
  isProcessing.value = true;

  // 模拟AI处理
  setTimeout(() => {
    let response = '抱歉，我无法回答这个问题。请尝试用其他方式提问。';

    // 简单的关键词匹配
    if (query.includes('GPU') && query.includes('使用率')) {
      response = 'GPU使用率高可能是由于正在运行的AI模型计算量较大，或者存在内存泄漏问题。建议检查模型配置和资源使用情况，也可以尝试优化模型结构或升级硬件。';
    } else if (query.includes('CPU') || query.includes('处理器')) {
      response = 'CPU使用率高通常表示系统正在处理大量计算任务。您可以查看任务管理器，关闭不必要的进程，或者考虑升级到性能更强大的CPU。';
    } else if (query.includes('内存') || query.includes('RAM')) {
      response = '内存使用率高可能是由于运行的应用程序过多或内存泄漏。建议关闭不需要的程序，检查是否有内存泄漏的应用，并考虑增加系统内存。';
    } else if (query.includes('诊断') || query.includes('问题')) {
      response = '系统诊断正在进行中，预计需要1-2分钟。诊断完成后，我会为您提供详细的问题分析和解决方案。';
    }

    conversation.value.push({
      type: 'ai',
      content: response,
      time: formatTime()
    });

    isProcessing.value = false;
    scrollToBottom();
  }, 3000);
}

// 发送文本消息
function sendMessage() {
  if (!userInput.value.trim()) {
    message.warning('请输入消息内容');
    return;
  }

  addUserMessage(userInput.value);
  processUserQuery(userInput.value);
}

// 滚动到对话底部
function scrollToBottom() {
  setTimeout(() => {
    const chatContainer = document.querySelector('.chat-container');
    if (chatContainer) {
      chatContainer.scrollTop = chatContainer.scrollHeight;
    }
  }, 100);
}

// 初始化
onMounted(() => {
  scrollToBottom();
});
</script>

<template>
  <NCard :bordered="false" class="card-wrapper h-full flex flex-col">
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-xl font-semibold flex items-center">
        <SvgIcon icon="mdi-microphone" class="mr-2 text-primary" />
        语音诊断助手
      </h3>
      <NButton
        :type="isListening ? 'danger' : 'primary'"
        :loading="isProcessing"
        @click="isListening ? stopListening() : startListening()"
        :disabled="isProcessing"
      >
        <template v-if="isListening">
          <SvgIcon icon="mdi-stop" class="mr-1" />
          停止录音
        </template>
        <template v-else-if="isProcessing">
          <SvgIcon icon="mdi-cog" class="mr-1 animate-spin" />
          处理中
        </template>
        <template v-else>
          <SvgIcon icon="mdi-microphone" class="mr-1" />
          开始录音
        </template>
      </NButton>
    </div>

    <!-- 对话区域 -->
    <div class="flex-1 overflow-y-auto chat-container p-4 bg-gray-50 rounded-lg mb-6">
      <div v-for="msg in conversation" :key="msg.time + msg.type" class="mb-6">
        <div :class="msg.type === 'user' ? 'flex justify-end' : 'flex justify-start'">
          <div :class="msg.type === 'user' ? 'bg-primary text-white rounded-lg rounded-br-none max-w-[80%]' : 'bg-white text-gray-800 rounded-lg rounded-bl-none max-w-[80%] shadow-sm'" class="p-4">
            <p>{{ msg.content }}</p>
            <p :class="msg.type === 'user' ? 'text-primary-100' : 'text-gray-400'" class="text-xs mt-2 text-right">{{ msg.time }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="flex gap-2">
      <NInput
        v-model:value="userInput"
        placeholder="请输入您的问题..."
        class="flex-1"
        :disabled="isProcessing"
        @keyup.enter="sendMessage"
      />
      <NButton type="primary" @click="sendMessage" :disabled="isProcessing">
        <SvgIcon icon="mdi-send" />
      </NButton>
    </div>
  </NCard>
</template>

<style scoped>
.chat-container {
  scrollbar-width: thin;
}

.chat-container::-webkit-scrollbar {
  width: 6px;
}

.chat-container::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}

.chat-container::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
</style>